O bootstrap divide a tela em até 12 colunas em cada linha do browser.

Cada vez que você insere uma coluna ele divide a linha para que as colunas tenham o mesmo tamanho.

Portanto, ao inserir uma div agrupadora com a classe row e uma div filha esta ocupara toda a linha inteira.
Ao inserir uma segunda div filha o espaço da linha será dividido em 2 partes iguais, uma para cada div filha.
Para usar este efeito basta inserir o bootstrap e colocar na div superior ( que agrega uma ou mais divs da linha) a classe class="row"
Redimensione a tela para ver os efeitos

Uma coluna.

.col1

Duas colunas de tamanhos iguais.

.col1
.col2

Três colunas de tamanhos iguais.

.col1
.col2
.col3

Quatro colunas de tamanhos iguais.

.col1
.col2
.col3
.col4

Cinco colunas de tamanhos iguais.

.col1
.col2
.col3
.col4
.col5

Seis colunas de tamanhos iguais.

.col1
.col2
.col3
.col4
.col5
.col6

Sete colunas de tamanhos iguais.

.col1
.col2
.col3
.col4
.col5
.col6
.col7

Oito colunas de tamanhos iguais.

.col1
.col2
.col3
.col4
.col5
.col6
.col7
.col8

Nove colunas de tamanhos iguais.

.col1
.col2
.col3
.col4
.col5
.col6
.col7
.col8
.col9

Dez colunas de tamanhos iguais.

.col1
.col2
.col3
.col4
.col5
.col6
.col7
.col8
.col9
.col10

Onze colunas de tamanhos iguais.

.col1
.col2
.col3
.col4
.col5
.col6
.col7
.col8
.col9
.col10
.col11

Doze colunas de tamanhos iguais.

.col1
.col2
.col3
.col4
.col5
.col6
.col7
.col8
.col9
.col10
.col11
.col12

Código da página


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

    <nav class="navbar navbar-light mb-4" style="background-color:aqua">
        <div class="container">
            <div class="navbar-brand mb-0 h1">
                <h3>Bootstrap - GRID</h3>
            </div>
        </div>
    </nav>

    <div style="padding-left:5px" class="container">

        <div class="container-fluid mt-3 " style="padding-left:5px">
            <h2>O bootstrap divide a tela em até 12 colunas em cada linha do browser.</h2>
            <h4>Cada vez que você insere uma coluna ele divide a linha para que as colunas tenham o mesmo tamanho.</h4>
            Portanto, ao inserir uma div agrupadora com a classe row e uma div filha esta ocupara toda a linha inteira.<br />
            Ao inserir uma segunda div filha o espaço da linha será dividido em 2 partes iguais, uma para cada div filha.<br />
            Para usar este efeito basta inserir o bootstrap e colocar na div superior ( que agrega uma ou mais divs da linha) a classe class="row"<br>
            Redimensione a tela para ver os efeitos<br><br>
        </div>
    </div>
            <p>Uma coluna.</p>
            <div class="row">
                <div class="col" style="background-color:black;color:white">.col1</div>
            </div>
            <hr />

            <p>Duas colunas de tamanhos iguais.</p>
            <div class="row">
                <div class="col" style="background-color:black;color:white;">.col1</div>
                <div class="col" style="background-color:blanchedalmond;">.col2</div>
            </div>
            <hr />

            <p>Três colunas de tamanhos iguais.</p>
            <div class="row">
                <div class="col" style="background-color:black;color:white;">.col1</div>
                <div class="col" style="background-color:blanchedalmond;">.col2</div>
                <div class="col" style="background-color:blue;">.col3</div>
            </div>
            <hr />

            <p>Quatro colunas de tamanhos iguais.</p>
            <div class="row">
                <div class="col" style="background-color:black;color:white;">.col1</div>
                <div class="col" style="background-color:blanchedalmond;">.col2</div>
                <div class="col" style="background-color:blue;">.col3</div>
                <div class="col" style="background-color:blueviolet;">.col4</div>
            </div>
            <hr />

            <p>Cinco colunas de tamanhos iguais.</p>
            <div class="row">
                <div class="col" style="background-color:black;color:white;">.col1</div>
                <div class="col" style="background-color:blanchedalmond;">.col2</div>
                <div class="col" style="background-color:blue;">.col3</div>
                <div class="col" style="background-color:blueviolet;">.col4</div>
                <div class="col" style="background-color:brown;">.col5</div>
            </div>
            <hr />

            <p>Seis colunas de tamanhos iguais.</p>
            <div class="row">
                <div class="col" style="background-color:black;color:white;">.col1</div>
                <div class="col" style="background-color:blanchedalmond;">.col2</div>
                <div class="col" style="background-color:blue;">.col3</div>
                <div class="col" style="background-color:blueviolet;">.col4</div>
                <div class="col" style="background-color:brown;">.col5</div>
                <div class="col" style="background-color:steelblue;">.col6</div>
            </div>
            <hr />

            <p>Sete colunas de tamanhos iguais.</p>
            <div class="row">
                <div class="col" style="background-color:black;color:white;">.col1</div>
                <div class="col" style="background-color:blanchedalmond;">.col2</div>
                <div class="col" style="background-color:blue;">.col3</div>
                <div class="col" style="background-color:blueviolet;">.col4</div>
                <div class="col" style="background-color:brown;">.col5</div>
                <div class="col" style="background-color:steelblue;">.col6</div>
                <div class="col" style="background-color:blueviolet;">.col7</div>
            </div>
            <hr />

            <p>Oito colunas de tamanhos iguais.</p>
            <div class="row">
                <div class="col" style="background-color:black;color:white;">.col1</div>
                <div class="col" style="background-color:blanchedalmond;">.col2</div>
                <div class="col" style="background-color:blue;">.col3</div>
                <div class="col" style="background-color:blueviolet;">.col4</div>
                <div class="col" style="background-color:brown;">.col5</div>
                <div class="col" style="background-color:steelblue;">.col6</div>
                <div class="col" style="background-color:blueviolet;">.col7</div>
                <div class="col" style="background-color:cadetblue;">.col8</div>
            </div>
            <hr />

            <p>Nove colunas de tamanhos iguais.</p>
            <div class="row">
                <div class="col" style="background-color:black;color:white;">.col1</div>
                <div class="col" style="background-color:blanchedalmond;">.col2</div>
                <div class="col" style="background-color:blue;">.col3</div>
                <div class="col" style="background-color:blueviolet;">.col4</div>
                <div class="col" style="background-color:brown;">.col5</div>
                <div class="col" style="background-color:steelblue;">.col6</div>
                <div class="col" style="background-color:blueviolet;">.col7</div>
                <div class="col" style="background-color:cadetblue;">.col8</div>
                <div class="col" style="background-color:chartreuse;">.col9</div>
            </div>
            <hr />

            <p>Dez colunas de tamanhos iguais.</p>
            <div class="row">
                <div class="col" style="background-color:black;color:white;">.col1</div>
                <div class="col" style="background-color:blanchedalmond;">.col2</div>
                <div class="col" style="background-color:blue;">.col3</div>
                <div class="col" style="background-color:blueviolet;">.col4</div>
                <div class="col" style="background-color:brown;">.col5</div>
                <div class="col" style="background-color:steelblue;">.col6</div>
                <div class="col" style="background-color:blueviolet;">.col7</div>
                <div class="col" style="background-color:cadetblue;">.col8</div>
                <div class="col" style="background-color:chartreuse;">.col9</div>
                <div class="col" style="background-color:coral;">.col10</div>
            </div>
            <hr />

            <p>Onze colunas de tamanhos iguais.</p>
            <div class="row">
                <div class="col" style="background-color:black;color:white;">.col1</div>
                <div class="col" style="background-color:blanchedalmond;">.col2</div>
                <div class="col" style="background-color:blue;">.col3</div>
                <div class="col" style="background-color:blueviolet;">.col4</div>
                <div class="col" style="background-color:brown;">.col5</div>
                <div class="col" style="background-color:steelblue;">.col6</div>
                <div class="col" style="background-color:blueviolet;">.col7</div>
                <div class="col" style="background-color:cadetblue;">.col8</div>
                <div class="col" style="background-color:chartreuse;">.col9</div>
                <div class="col" style="background-color:coral;">.col10</div>
                <div class="col" style="background-color:cornflowerblue;">.col11</div>
            </div>
            <hr />

            <p>Doze colunas de tamanhos iguais.</p>
            <div class="row">
                <div class="col" style="background-color:black;color:white;">.col1</div>
                <div class="col" style="background-color:blanchedalmond;">.col2</div>
                <div class="col" style="background-color:blue;">.col3</div>
                <div class="col" style="background-color:blueviolet;">.col4</div>
                <div class="col" style="background-color:brown;">.col5</div>
                <div class="col" style="background-color:steelblue;">.col6</div>
                <div class="col" style="background-color:blueviolet;">.col7</div>
                <div class="col" style="background-color:cadetblue;">.col8</div>
                <div class="col" style="background-color:chartreuse;">.col9</div>
                <div class="col" style="background-color:coral;">.col10</div>
                <div class="col" style="background-color:cornflowerblue;">.col11</div>
                <div class="col" style="background-color:crimson;">.col12</div>
            </div>
            <hr />

</body>
</html>